<template>
  <div class="userinfo">
    <div class="content">
      <!-- 上 -->
      <div class="top">
        <div class="avatar">
          <img v-if="userInfoList.user_img" :src="userInfoList.user_img" />
          <img v-else src="@/assets/avatar.jpg" />
        </div>
        <div class="edit">
          <van-row class="fans">
            <van-col span="8">
              <span>0</span>
              <p>粉丝</p>
            </van-col>
            <van-col span="8">
              <span>16</span>
              <p>关注</p>
            </van-col>
            <van-col span="8">
              <span>0</span>
              <p>获赞</p>
            </van-col>
          </van-row>
          <van-button
            class="btn"
            color="#FB7299"
            plain
            block
            @click="$router.push('/edit')"
            >编辑资料</van-button
          >
        </div>
      </div>
      <!-- 下 -->
      <div class="bottom">
        <p>
          <strong class="nickname">{{ userInfoList.name }}</strong>
          <i
            v-if="userInfoList.gender == 1"
            class="iconfont icon-nan"
            style="color: #39a9ed"
          ></i>
          <i v-else class="iconfont icon-ziyuan2" style="color: #fc5531"></i>
        </p>
        <p v-if="userInfoList.user_desc">{{ userInfoList.user_desc }}</p>
        <p v-else>这个人很懒,什么都没有留下</p>
        <span class="uid">uid:{{ userInfoList.id }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "userInfo",
  props: {
    userInfoList: {
      type: Object,
      default: {},
    },
  },
};
</script>

<style scoped  lang="less" >
.userinfo {
  background: url(~@/assets/userbg.jpg) pink;
  padding-top: 120px;
}
.content {
  background-color: #fff;
  padding: 0 10px 10px;
}
.top {
  display: flex;
  .avatar {
    width: 100px;
    height: 100px;
    position: relative;
    img {
      position: absolute;
      top: -15px;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
  }
  .edit {
    flex: 1;
    margin-left: 30px;
    .fans {
      height: 52px;
      background-color: #fff;
      margin: 3px 0 0px;
      text-align: center;
      .van-col + .van-col {
        position: relative;
        &::before {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          content: "";
          width: 1px;
          height: 12px;
          background-color: #999;
        }
      }
    }
    .btn {
      height: 30px;
      border-radius: 5px;
    }
  }
}
.bottom {
  .nickname {
    font-size: 26px;
  }
  .uid {
    background-color: #eee;
    font-size: 12px;
    padding: 0 10px;
  }
}
</style>